<template>
  <div class="home">
    <div class="header-container">
      <el-button
        class="exit-btn"
        size="medium"
        type="info"
        @click="showExit = true"
        >注销</el-button
      >
    </div>
    <div class="container">
      <div class="menu-container">
        <div
          :class="{ 'menu-btn': true, active: actived('/home/work') }"
          @click="changeRouter('/home/work')"
        >
          工作台
        </div>
        <div
          :class="{ 'menu-btn': true, active: actived('/home/message') }"
          @click="changeRouter('/home/message')"
        >
          消息
        </div>
        <div
          :class="{ 'menu-btn': true, active: actived('/home/other') }"
          @click="changeRouter('/home/other')"
        >
          其他
        </div>
      </div>

      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

    <el-dialog :visible.sync="showExit" width="30%">
      <span>您确定要退出系统吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showExit = false">取 消</el-button>
        <el-button type="warning" @click="exit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { showLoading, hideLoading } from "../utils";
export default {
  name: "Home",
  data() {
    return {
      appList: [
        {
          id: "001",
          name: "云oms管理系统",
          url: "http://192.168.0.104:9000",
        },
        {
          id: "002",
          name: "用户中心",
          url: "http://www.baidu.com",
        },
        {
          id: "003",
          name: "拣货管理系统",
          url: "http://www.baidu.com",
        },
        {
          id: "004",
          name: "智能pos管理系统",
          url: "http://www.baidu.com",
        },
      ],
      menus: [
        {
          id: "001",
          name: "发送通知",
          url: "http://192.168.0.104:9000/#/home/notice-edit?hiddenmenu=true",
        },
        {
          id: "002",
          name: "通知列表",
          url: "http://192.168.0.104:9000/#/home/notice-list?hiddenmenu=true",
        },
      ],
      showExit: false,
    };
  },
  computed: {
    actived() {
      return function(path) {
        return path == this.$route.path;
      };
    },
  },

  methods: {
    exit() {
      let loadObj = showLoading();
      this.showExit = false;
      setTimeout(() => {
        hideLoading(loadObj);
        this.$router.replace("/login");
      }, 1000);
    },

    changeRouter(path) {
      console.log(this.$route.path);
      console.log(path);
      if (this.$route.path == path) return;
      this.$router.replace(path);
    },
  },

  mounted() {},
};
</script>
<style lang="less">
.home {
  width: 100%;
  height: 100%;
  background-color: rgb(236, 239, 243);

  .container {
    display: flex;
    height: 100%;
    width: 100%;
    .menu-container {
      width: 100px;
      height: 100%;
      background-color: white;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      align-items: center;
      .menu-btn {
        height: 80px;
        width: 80px;
        line-height: 80px;
        text-align: center;
        border-radius: 40px;
        background-color: lightgray;
        margin-top: 40px;
      }
      .active {
        background-color: orange;
      }
    }
  }
  .header-container {
    height: 50px;
    background: #fff;
    position: relative;
  }
  .exit-btn {
    position: absolute;
    right: 10px;
    top: 7px;
  }
}
</style>
